<style lang="less" scoped>
	.swiper {
		position: relative;
		.bnImg {
			object-fit: cover;
		}
		.swiperDot {
			width: 100%;
			height: 40rpx;
			text-align: center;
			position: absolute;
			bottom: 24rpx;
			left: 0;
			display: flex;
			margin: 0 auto;
			justify-items: center;
			.west {
				justify-items: center;
				text-align: center;
				margin: 0 auto;
				.dot {
					background: rgba(255, 255, 255, 0.5);
					width: 20rpx;
					height: 4rpx;
					margin-right: 8rpx;
					display: inline-block;
					justify-items: center;
					border-radius: 4rpx;
				}
				.hover {
					background: #ffffff;
				}
			}
		}
	}
</style>
<template>
	<div class="swiper">
		<swiper class="screen-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500" :circular="true" easing-function="linear" :style="{ height: height + 'px'}" @change="change">
			<swiper-item v-for="(item, index) in list" :key="index" class="filter" @tap="swiperClick(item)">
				<slot name="content">
					<img :src="item" class="bnImg bg-white animated fadeIn" />
				</slot>
			</swiper-item>
		</swiper>
		<div class="swiperDot" :style="{bottom: dot + 'px'}" v-if="list.length>1">
			<div class="west">
				<div class="dot" v-for="(x, index) in list" :key="index" :class="[current === index ? 'hover' : '']"></div>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	/**
	 * Created by PhpStorm.
	 * User:  iyahe@qq.com (天明)
	 * Date: 2020/1/2 0002
	 * Time: 上午 11:49
	 * Description:
	 */
	export default {
		props: {
			list: {
				type: Array,
				default: []
			},
			height: {
				type: Number,
				default: 200
			},
			dot: {
				type: Number,
				default: 12
			}
		},
		data() {
			return {
				DotStyle: false,
				current: 0
			}
		},
		methods: {
			swiperEvent (e) {
				const item = e.currentTarget.dataset.item;
			},
			change (item) {
				const current = item.detail.current;
				const imgs = this.list[current];
				this.current = current;
				this.$emit('change', {
					imgs: imgs,
					current: current
				})
			},
			swiperClick (imgSrc) {
				wx.previewImage({
					current: imgSrc,
					urls: this.list
				})
			}
		}
	}
</script>
